{% extends 'images/images_base.html' %}

{% block title %} Bookmark an image {% endblock title %}

{% block content %}
    <div id="wrapper-image">
        <h2>Bookmark an image</h2>
        <div class="line"></div>
        <div class="content" style="display: flex;">
            <img src="{{ slug }}" style="width: 20em; height: 20em;">
            <form action="{% url 'images:create' slug=slug %}" method="post" enctype='multipart/form-data'>
                {% csrf_token %}
                {% for field in form %}
                    {% if field.errors and request.method == 'POST' %}
                        <div style="color: #FF2238; font-weight: bold;" class="label-errors">{{ field.label }}</div>
                        <div class="field-errors">{{ field }}</div>
                    {% else %}
                        {{ field.label }}
                        {{ field }}
                    {% endif %}
                {% endfor %}
                <input class="btn btn-success" type="submit" value="Bookmark it">
            </form>
        </div>
    </div>

    <style>
        #wrapper-image {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #wrapper-image .line {
            width: 50%;
        }

        #wrapper-image .content {
            height: 28em;
        }

        #wrapper-image form {
            display: flex;
            flex-direction: column;
            margin-left: 2em;
            justify-content: space-between;
        }

        #wrapper-image img {
            border-radius: 8px;
            border: 1px solid #DDD;
        }

        /* */

        #wrapper-image input.field{
            background: rgb(28, 30, 33);
            box-shadow: inset -100px -100px 0 rgb(28, 30, 33); /*Prevent yellow autofill color*/
            color: rgb(52, 56, 61);
            border-radius: .25rem;
            padding: 10px;
            margin-bottom: 5px;
        }

        #wrapper-image textarea.field{
            background: rgb(28, 30, 33);
            box-shadow: inset -100px -100px 0 rgb(28, 30, 33); /*Prevent yellow autofill color*/
            color: rgb(52, 56, 61);
            border-radius: .25rem;
            padding: 10px;
            margin-bottom: 5px;
            border: 1px solid #DDD;
        }

        #wrapper-image textarea[type="text"]:focus {
            color: rgb(255, 255, 255);
        }

        #wrapper-image input[type="text"]:focus, div.fields input[type="password"]:focus{
            color: rgb(255, 255, 255);
        }

        .field-errors textarea{
            border: 2px solid #D91D30;
        }

    </style>
{% endblock content %}


